<template>
    <el-dialog title="简历表" v-model="visible" :width="800" destroy-on-close @closed="$emit('closed')">

        <el-row id="printContent">
            <el-col :span="20">
                <el-descriptions
                    class="margin-top"
                    :column="3"
                    border
                >
                    <el-descriptions-item>
                        <template #label>
                            <div class="cell-item">
                                <el-icon>
                                    <el-icon-user />
                                </el-icon>
                                姓名
                            </div>
                        </template>
                        蔡徐坤
                    </el-descriptions-item>

                    <el-descriptions-item>
                        <template #label>
                            <div class="cell-item">
                                <el-icon>
                                    <el-icon-female />
                                </el-icon>
                                性别
                            </div>
                        </template>
                        男
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template #label>
                            <div class="cell-item">
                                <el-icon>
                                    <el-icon-fries />
                                </el-icon>
                                生日
                            </div>
                        </template>
                        1998-11-20
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template #label>
                            <div class="cell-item">
                                <el-icon>
                                    <el-icon-suitcase />
                                </el-icon>
                                学历
                            </div>
                        </template>
                        本科
                    </el-descriptions-item>

                    <el-descriptions-item>
                        <template #label>
                            <div class="cell-item">
                                <el-icon>
                                    <el-icon-medal />
                                </el-icon>
                                政治面貌
                            </div>
                        </template>
                        群众
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template #label>
                            <div class="cell-item">
                                <el-icon>
                                    <el-icon-user />
                                </el-icon>
                                婚姻状况
                            </div>
                        </template>
                        未婚
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template #label>
                            <div class="cell-item">
                                <el-icon>
                                    <el-icon-iphone />
                                </el-icon>
                                手机号
                            </div>
                        </template>
                        18100000000
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template #label>
                            <div class="cell-item">
                                <el-icon>
                                    <el-icon-creditCard />
                                </el-icon>
                                身份证号
                            </div>
                        </template>
                        511502199811208855
                    </el-descriptions-item>

                </el-descriptions>
            </el-col>

            <el-col :span="4" class="head-img">
                <img style="height: 100%" src="https://q1.qlogo.cn/g?b=qq&nk=2653907035&s=100" alt="">
            </el-col>

            <el-col :span="24">
                <el-descriptions
                    :column="3"
                    border
                    style="margin-top: -1px;"
                >
                    <el-descriptions-item>
                        <template #label style="width: 100px;">
                            <div class="cell-item">
                                籍贯
                            </div>
                        </template>
                        四川省-宜宾市-翠屏区
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template #label>
                            <div class="cell-item">
                                现住址
                            </div>
                        </template>
                        四川省宜宾市翠屏区池口街3号8幢6楼13号
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template #label>
                            <div class="cell-item">
                                户籍地址
                            </div>
                        </template>
                        四川省宜宾市翠屏区池口街3号8幢6楼13号
                    </el-descriptions-item>

                    <el-descriptions-item>
                        <template #label>
                            <div class="cell-item">
                                入职日期
                            </div>
                        </template>
                        <el-tag size="small">2023-02-05</el-tag>
                    </el-descriptions-item>

                    <el-descriptions-item>
                        <template #label>
                            <div class="cell-item">
                                离职日期
                            </div>
                        </template>
                        <el-tag size="small">2023-01-02</el-tag>
                    </el-descriptions-item>
                </el-descriptions>
            </el-col>
        </el-row>

        <template #footer>
            <el-button @click="visible=false">关闭</el-button>
            <el-button type="primary" title="点击打印简历表" @click="openPrint()">打印</el-button>
        </template>
    </el-dialog>

</template>

<script setup>

import {reactive, ref} from "vue";
import printJS from 'print-js'

const emit = defineEmits(['closed']);
const props = defineProps({
    id: String
});
const visible = ref(false);

//页面信息数据
const info = reactive({
    eid: 0,
});

function openPrint(){
    printJS({
        printable: 'printContent',
        type: 'html',
        targetStyles: ['*']
    })
}

defineExpose({
    open(data){
        visible.value = true;
        info.eid = data.id;
    }
})

</script>

<style  lang="scss">

.head-img {
    border-top: 1px solid #ebeef5;
    border-right: 1px solid #ebeef5;
}

</style>
